<template>
  <section class="xmv-button xmv-wrap">
    <h4>按钮</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <button type="button" class="c-button c-button--block c-button--error u-large">下一步</button>
      <div style="height:10px"></div>
      <button type="button" class="c-button c-button--block c-button--error u-large">获取报价</button>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
&ltbutton type="button" class="c-button c-button--block c-button--error u-large"&gt下一步&lt/button&gt
&ltbutton type="button" class="c-button c-button--block c-button--error u-large"&gt获取报价&lt/button&gt
        </code>
      </pre>
    </div>
    <div class="demo-markup-source u-letter-box--small c-text">
      <button type="button" class="c-button c-button--ghost">男</button>
      <button type="button" class="c-button c-button--ghost-error">女</button>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
&ltbutton type="button" class="c-button c-button--ghost"&gt男&lt/button&gt
&ltbutton type="button" class="c-button c-button--ghost-error"&gt女&lt/button&gt
        </code>
      </pre>
    </div>
    <!-- <p>Basic Button</p>
    <div class="demo-markup-source u-letter-box--small c-text">
      <button type="button" class="c-button">Button</button>
      <input type="button" class="c-button" value="Input">
      <a class="c-button">Link</a>
      <button type="button" class="c-button" disabled="">Button</button>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &ltbutton type="button" class="c-button"&gt Button&lt/button&gt
          &ltinput type="button" class="c-button" value="Input"&gt
          &lta class="c-button"&gtLink&lt/a&gt
          &ltbutton type="button" class="c-button" disabled=""&gtButton&lt/button&gt
        </code>
      </pre>
    </div>
    <p>Button color</p>
    <div class="demo-markup-source u-letter-box--small c-text ">
      <button type="button" class="c-button">Button</button>
      <button type="button" class="c-button c-button--brand">Button</button>
      <button type="button" class="c-button c-button--info">Button</button>
      <button type="button" class="c-button c-button--warning">Button</button>
      <button type="button" class="c-button c-button--success">Button</button>
      <button type="button" class="c-button c-button--error">Button</button>
    </div>
    <div class="u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &ltbutton type="button" class="c-button"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--brand"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--info"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--warning"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--success"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--error"&gtButton&lt/button&gt
        </code>
      </pre>
    </div>
    <div class="demo-markup-source u-letter-box--small c-text ">
      <button type="button" class="c-button c-button--ghost">Button</button>
      <button type="button" class="c-button c-button--ghost-brand">Button</button>
      <button type="button" class="c-button c-button--ghost-info">Button</button>
      <button type="button" class="c-button c-button--ghost-warning">Button</button>
      <button type="button" class="c-button c-button--ghost-success">Button</button>
      <button type="button" class="c-button c-button--ghost-error">Button</button>
    </div>
    <div class="u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &ltbutton type="button" class="c-button c-button--ghost"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--ghost-brand"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--ghost-info"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--ghost-warning"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--ghost-success"&gtButton&lt/button&gt
          &ltbutton type="button" class="c-button c-button--ghost-error"&gtButton&lt/button&gt
        </code>
      </pre>
    </div> -->
  </section>
</template>
<style lang="less" scoped>
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>

